import React from "react";
import { Tabs } from "expo-router";
import { 
  Home, 
  BookOpen, 
  Scan, 
  BarChart, 
  MessageSquare,
  User,
  Nfc
} from "lucide-react-native";
import { colors } from "@/constants/colors";
import { Platform } from "react-native";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.text.tertiary,
        tabBarStyle: {
          borderTopColor: colors.border,
          height: Platform.OS === 'ios' ? 88 : 60, // Increased height for iOS to account for safe area
          paddingTop: 8,
          paddingBottom: Platform.OS === 'ios' ? 28 : 8, // Extra padding for iOS
        },
        headerStyle: {
          backgroundColor: colors.background,
        },
        headerTitleStyle: {
          color: colors.text.primary,
          fontWeight: '600',
        },
        tabBarLabelStyle: {
          fontSize: 10,
          marginBottom: Platform.OS === 'ios' ? 0 : 4,
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => <Home size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="playlist"
        options={{
          title: "Learn",
          tabBarIcon: ({ color }) => <BookOpen size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="ocr"
        options={{
          title: "Scan",
          tabBarIcon: ({ color }) => (
            <Scan size={24} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="nfc-scan"
        options={{
          title: "NFC",
          tabBarIcon: ({ color }) => <Nfc size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="stats"
        options={{
          title: "Stats",
          tabBarIcon: ({ color }) => <BarChart size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="ai-chat"
        options={{
          title: "AI Chat",
          tabBarIcon: ({ color }) => <MessageSquare size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "Profile",
          tabBarIcon: ({ color }) => <User size={24} color={color} />,
        }}
      />
    </Tabs>
  );
}